<template>
    <!-- 招聘求职 -->
    <div class="recruitment-content" v-loading="noticeListLoading">
          <div class="recommend-position" v-loading="noticeListLoading">
            <div class="title-block">
              <div class="block"></div>
              <div class="title"  style="font-family: 'fzhzgbjianti';">
                推荐职位
              </div>
            </div>
            <div class="condition" style="display: flex;
            width: 500px;white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;">
              <div v-if="a!=''||b!=''||c!=''||d!=''">当前筛选条件：</div>
              <div v-if="a!=''">期望月薪：{{ a }} &nbsp</div>
              <div v-if="b!=''">工作年限：{{ b }} &nbsp</div>
              <div v-if="g!=''">学历：{{ g }} &nbsp</div>
              <div v-if="f!=''">首选行业：{{f}} &nbsp</div>
              <div v-if="c!=''">公司规模：{{ c }} &nbsp</div>
              <div v-if="d!=''">企业性质：{{ d }} &nbsp</div>
<!--              当前筛选条件：期望月薪：{{ a }}+学历：{{  }}+工作年限：{{ b }}+公司规模：{{ c }}+企业性质：{{ d }}-->
<!--              +行业分类：{{  }}+公司规模：{{ c }}+企业性质：{{ d }}-->
            </div>
            <div class="filtrate" @click="openMsg()">
              <img src="@/assets/Recruitment/filtrate.png" alt="">
              <div class="btn">筛选</div>
            </div>
            <div v-if="isShow" style="
          width: 100%;height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;"
            >
              <div class="map1">
                <div class="map1-top">
                  <div class="title" style="font-family: 'fzhzgbjianti';">筛选</div>
                  <div class="img" @click="closeMsg()">
                    <img src="@/assets/Recruitment/close.png" alt="">
                  </div>
                </div>
                <!--      内容        -->
                <div class="content">
                  <div class="pay">
                    <div class="title">期望月薪（单选）</div>
                    <div style="margin-top: 20px">
                      <el-radio-group v-model="checkboxGroup" @change="changePay">
                        <el-radio-button v-for="item in payList" :key="item.id" :label="item">{{item.data}} {{ item.id==1?'元以下':'元' }}{{ item.id==9?'以上':'' }}</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="education">
                    <div class="title">学历（多选）</div>
                    <div style="margin-top: 20px">
                      <el-checkbox-group v-model="checkboxGroup1" @change="changeEdu">
                        <el-checkbox-button v-for="item in educationList" :label="item.id">{{item.data}}</el-checkbox-button>
                      </el-checkbox-group>
                    </div>
                  </div>
                  <div class="experience">
                    <div class="title">工作年限（单选）</div>
                    <div style="margin-top: 20px">
                      <el-radio-group v-model="checkboxGroup2" @change="changeExp">
                        <el-radio-button v-for="item in experienceList" :key="item.id" :label="item">{{item.data}} {{ item.id==1?'':'年' }}{{ item.id==6?'以上':'' }}</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="experience">
                    <div class="title">行业分类（单选）</div>
                    <div style="margin-top: 20px;display: flex;flex-direction: row;">
                      <div class="job-list1" @click="changeIndustryActive(0)":class="industry.includes(0)?'active':''" style="border: 1px solid #b7b1b1">不限</div>
                     <template v-if="jobList.length>0">
                       <div class="job-list" v-for="(item) in jobList" :key="item.id" :class="jobList.includes(item)?'active':''" style="border: 1px solid #b7b1b1">
                        {{item.jobTitle}}<i class="el-icon-close" @click="deleteItem(index)"></i>
                       </div>
                     </template>
                      <div class="job-list" @click="editItem" v-else style=" padding: 4px 70px;font-size: 24px;border: 1px solid #b7b1b1">+</div>
                    </div>
                  </div>
                  <div class="experience">
                    <div class="title">公司规模（单选）</div>
                    <div style="margin-top: 20px">
                      <el-radio-group v-model="peopleId" @change="changeExp1($event)">
                        <el-radio-button v-for="item in peopleList" :key="item.id" :label="item.id" >{{item.data}}</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="experience">
                    <div class="title">企业性质（单选）</div>
                    <div style="margin-top: 20px">
                      <el-radio-group v-model="typeId" @change="changeExp2($event)">
                        <el-radio-button v-for="item in typeList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="rule"></div>
                <div class="seek">
                  <div class="reset" @click="clear">重置</div>
                  <div class="search" @click="closeMsg">查看</div>
                </div>
              </div>
            </div>
          </div>
          <template v-if="noticeList.length>0">
<!--            <div class="post-top">-->
<!--              <div class="post" v-for="(item,index) in noticeList" :key="item.id" @click="skip(item.id)">-->
<!--                <div class="post-top">-->
<!--                  <div class="post-title">{{item.jobTitle }}</div>-->
<!--                  <div class="post-pay">{{item.minSalary }}-{{item.maxSalary}}元</div>-->
<!--                </div>-->
<!--                <div class="site">{{ item.jobAddress }}</div>-->
<!--                <div class="striping"></div>-->
<!--                <div class="recruiter">-->
<!--                  <img :src="item.comRecruiters.user.faceUrl ? item.comRecruiters.user.faceUrl:'@/static/Recruitment/defaultAvatar.jpg'" alt="">-->
<!--                  <div class="message">{{ item.comRecruiters.comPosition }} · {{item.comRecruiters.realName}}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
            <div class="position-block">
              <div class="position-item" v-for="(item,index) in noticeList" :key="item.id" @click="skip(item.id)">
                <div class="item-top">
                  <div class="post-title">{{item.jobTitle}}</div>
                  <div v-if="item.isHeat==1"><img src="@/assets/Recruitment/fair.png" alt="" style="width: 25px;height: 25px;margin: 20px 10px 0 0;"></div>
                  <div class="snap" v-if="item.worry==1">急招</div>
                </div>
                <div class="item-middle">
                  <div class="post-pay">{{item.minSalary }}-{{item.maxSalary}}元</div>
                  <div class="middle-right">
                    <div class="message">{{ item.comRecruiters.comPosition }} · {{item.comRecruiters.realName}}</div>
                    <img :src="item.comRecruiters.user.faceUrl ? item.comRecruiters.user.faceUrl:'@/static/Recruitment/defaultAvatar.jpg'" alt="">
                  </div>
                </div>
                <div class="item-bottom">
                  <div class="site">
                    <div><img src="@/assets/Recruitment/address.png" alt=""></div>
                    <div class="siteClass">{{ item.jobAddress }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
      <el-empty v-else style="display: flex;justify-content: center;align-items: center;"></el-empty>
      <el-dialog title="行业分类" v-if="dialogVisible" :visible.sync="dialogVisible" width="80%"
                 :close-on-click-modal="false" :close-on-press-escape="false" top="20vh" :destroy-on-close="true"  style="color: #498CF3;">
        <Industry ref="industry" @child="receive" v-on:listenToChildEvent = 'showMsgfromChild'></Industry>
        <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.industry.submit()">确 定</el-button>
      </span>
      </el-dialog>
          <div v-if="noticeList.length>0 && count>limit"  class="paging">
            <div>共<span style="color: #2F7CFF">{{count}}</span>条数据</div>
            <el-pagination
                background
                :page-size="limit"
                layout="prev, pager, next"
                prev-text="上一页"
                next-text="下一页"
                :total="count"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.page">
            </el-pagination>
            <div style="width: 110px;height: 1px"></div>
          </div>
    </div>
</template>

<script>
import {getPublishListApi} from '@/api/home'
import {getNatureListApi, getSalaryListApi1, getExperienceApi, getEducationApi, getSalaryApi} from "@/api/quick";
import index from "vuex";
import Industry from "@/components/Industry/Industry";
import {
  multipleChoiceChange
} from "@/utils/utils";
export default {
  name: "Recruitment",
  components: {Industry},
  computed: {
    index() {
      return index
    }
  },
  data(){
    return{
      noticeListLoading:false,
      dialogVisible: false,
      isSelect:false,
      isShow:false,
      scrollTop: '',
      type: 1,
      noticeList: [],
      page:1,limit:10,count:0,
      expId: '',
      eduId: '',
      salaryId: '',
      checkboxGroup: '',
      checkboxGroup1: [],
      checkboxGroup2:'',
      peopleId: '',
      peopleList:[],
      typeList:[],
      typeId: '',
      payList:[],
      educationList:[],
      experienceList: [],
      jobList:[],
      industry:[],
      categoryLoading:false,
      info:[],
      // subLevelModelList: {},
      eduList:[],
      list:[],
      orderDate: 1,
      a: '',
      b: '',
      c: '',
      d: '',
      g: '',
      f: '',
    }
  },
  methods:{
    deleteItem(index) {
      var that = this;
      that.jobList.splice(index, 1)
    },
    changeIndustryActive(index) {
      this.industry = multipleChoiceChange(this.industry, index)
      this.jobList = []
    },
    editItem() {
      this.dialogVisible = true;
    },
    receive(value){
      this.dialogVisible=false
      this.jobList=value
      this.industry=[]
    },
    showMsgfromChild(jobTitleList){
      this.f = jobTitleList
    },
    clear(){
      this.checkboxGroup=''
      this.checkboxGroup1=[]
      this.checkboxGroup2=''
      this.expId = ''
      this.eduId = ''
      this.salaryId = ''
      this.jobList=[]
      this.peopleId=''
      this.typeId=''
      this.industry=[]
      this.list=[]
      this.a=''
      this.b=''
      this.c=''
      this.d=''
      this.g=''
      this.f=''
    },
    changePay(e){
      this.salaryId = e.id
      this.a = e.data
    },
    changeEdu(ids){
      this.g=this.educationList.filter(item=>ids.includes(item.id)).map(item=>item.data).join(',');
      this.eduId = ids.join(',');
    },
    changeExp(e){
      this.expId = e.id
      this.b = e.data
    },
    changeExp1(id){
      this.peopleId = id
      this.c =JSON.parse(JSON.stringify(this.peopleList)).filter(item=>item.id==id)[0].data;
    },
    changeExp2(id){
      this.typeId = id
      // this.d = e.name
      this.d =JSON.parse(JSON.stringify(this.typeList)).filter(item=>item.id==id)[0].name;
    },
    openMsg(){
      this.isShow = true
      // this.$nextTick(()=>{
      //   this.initMap()
      // })
    },
    closeMsg(){
      this.isShow = false
      this.getList()
    },
    skip(id){
      this.$router.push({ name: 'Detail',query:{id:id} })
    },
    getList() {
      this.noticeListLoading = true
      let copy = JSON.parse(JSON.stringify(this.jobList));
      copy.forEach((item, index) => {
        this.list.push(item.id)
      })
      getPublishListApi({page:this.page,limit:16,eduId:this.eduId,expId:this.expId,salaryId:this.salaryId,jobTypes:this.list.join(','),jobType:this.industry.join(','),scaleId: this.peopleId,
        natureId: this.typeId,jobLevel:3,type:this.type,orderDate: this.orderDate}).then((res) => {
        console.log(res)
          this.noticeList = res.list;
        this.count = res.count
      }).finally(()=>{
        this.noticeListLoading = false
      })
    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage',this.page)
      this.getList()
    },
    // 月薪
    getSalaryList() {
      getSalaryListApi1({}).then((res) => {
        this.payList = res
      }).catch((res) => {
        // console.log(res)
      })
    },
    // 学历
    getEducation() {
      getEducationApi({}).then((res) => {
        this.educationList = res
      }).catch((res) => {
        // console.log(res)
      })
    },
    // 经验
    getExperience() {
      getExperienceApi({}).then((res) => {
        this.experienceList = res
        this.expId = this.experienceList.id
      }).catch((res) => {
        // console.log(res)
      })
    },
    // 规模
    getPeople() {
      getSalaryApi({}).then((res) => {
        this.peopleList = res
      }).catch((res) => {
        // console.log(res)
      })
    },
    // 性质
    getNatureList() {
      getNatureListApi({}).then((res) => {
        this.typeList = res
      }).catch((res) => {
        // console.log(res)
      })
    },
  },
  // 从列表页进入详情页，返回时依然能在之前页面，使列表页不刷新
  created() {
    //document.addEventListener('scroll',this.handelscroll)
    let currentPage=sessionStorage.getItem('currentPage')
    if(currentPage!=null){
      this.page = Number(currentPage)
    }
  },
  updated() {
    let scrollTop = sessionStorage.getItem('scrollTop')
    window.scrollTo({
      top:scrollTop,
      behavior: 'instant'
    })
    sessionStorage.setItem('scrollTop',0);
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.getList()
    this.getSalaryList()
    this.getEducation()
    this.getExperience()
    this.getPeople()
    this.getNatureList()
  },
}
</script>

<style lang="scss" scoped>
.recruitment-content{
  .position-block{
    width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .position-item{
      background-color: #fff;
      border-radius: 15px;
      margin:10px 10px;
      width: calc((100% - 45px) / 2);
      height: 145px;
      padding: 10px 20px;
      box-sizing: border-box;
      .item-top{
        width: 340px;
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .post-title{
          margin: 15px 10px 0 0;
          font-size: 15px;
          font-weight: 900;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .snap{
          width: 47px;
          height: 23px;
          border: 1px solid #C0959A;
          border-radius: 4px;
          font-size: 15px;
          color: #D94349;
          text-align: center;
          margin-top: 15px;
        }
      }
      .item-middle{
        width: 340px;
        display: flex;
        justify-content: space-between;
        height: 40px;
        .post-pay{
          margin-top: 10px;
          color: #5493F3;
          font-size: 15px;
        }
        .middle-right{
          display: flex;
          font-size: 15px;
          align-items: center;
          img{
            width: 35px;
            height: 35px;
            margin: 0 0 0 15px;
            border-radius: 30px;
          }
        }
      }
      .item-bottom{
        width: 340px;
        .site{
          display: flex;
          margin-top: 5px;
          color: #8E8E8E;
          font-size: 15px;
          .siteClass{
            height: 40px;
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
          }
          img{
            width: 15px;
            height: 15px;
            margin-top: 3px;
          }
        }
      }

    }
  }

  ::v-deep{
    .btn-prev{
      //min-width: 50px;
      span{
        display: block;
        min-width: 70px;
      }
    }
    .btn-next{
      span{
        display: block;
        min-width: 70px;
      }
    }
    .el-radio-button:first-child .el-radio-button__inner{
      border-left: 1px solid #b7b1b1;
    }
    .el-radio-button__inner{
      border: 1px solid #b7b1b1;
      padding: 12px 0;
     }
    .el-checkbox-button:first-child .el-checkbox-button__inner{
      border-left: 1px solid #b7b1b1;
    }
    .el-checkbox-button__inner{
      border: 1px solid #b7b1b1;
    }
  }
  .text{
    font-size: 15px;
    color: #498CF3;
  }
  .text1{
    color: #000;
    font-size: 20px;
    margin-top: 15px;
    margin-right: 10px;
  }
  .text2{
    color: #498CF3;
    font-size: 22px;
    margin-top: 15px;
    margin-right: 10px;
    font-weight: 800;
  }
  .recommend-position{
    width: 800px;
    height: 50px;
    background-color: #fff;
    color: #498CF3;
    padding: 0 30px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    margin: 30px auto;
    .filtrate{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12%;
      height: calc((100% - 20px));
      background-color: #498CF3;
      border-radius: 50px;
      img{
        width: calc(100% - 75px);
        height: calc((100% - 12px));
        margin-right: 5px;
      }
      .btn{
        color: #fff;
        margin-bottom: 3px;
      }
    }
    .map1{
      position: relative;
      width: 100%;
      height: 80%;
      background-color: #fff;
      border-radius: 15px;
      padding: 10px;
      .map1-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
          text-align: left;
          margin: 10px;
          color: #498CF3;
          font-size: 26px;
          //font-weight: 900;
        }
        .img{
          width: 3%;
          height: 75%;
          margin-right: 20px;
          img{
            width: 100%;
            height: 100%;
          }
        }

      }
    }
    .content{
      width: 100%;
      height: calc((100% - 170px));
      padding: 0 8px;
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
      .title{
        text-align: left;
        color: #000;
        font-size: 26px;
        font-weight: 400;
      }
      .pay{
        ::v-deep{
          .el-radio-button{
            border-radius: 5px;
            width: calc((100% - 110px)/5);
            height: calc((100% - 20px)/2);
            margin: 0 10px 20px;
            //background-color: #EDECEC;
            color: #498CF3;
            //border: 1px solid #999999;
            .el-radio-button__inner{
              //width: calc((100% - 50px)/5);
              width: 100%;
              height: 100%;
              border-radius: 5px;
              font-size: 18px;
              //background-color: #EDECEC;
            }
          }
        }
      }
      .education{
        ::v-deep{
          .el-checkbox-button{
            border-radius: 5px;
            width: calc((100% - 110px)/5);
            height: calc((100% - 20px)/2);
            margin: 0 10px 20px;
            //background-color: #EDECEC;
            color: #498CF3;
            .el-checkbox-button__inner{
              //width: calc((100% - 50px)/5);
              width: 100%;
              height: 100%;
              border-radius: 5px;
              font-size: 18px;
              //background-color: #EDECEC;
            }
          }
        }
      }
      .experience{
        width: 100%;
        ::v-deep{
          .el-radio-group{
            width: 100%;
          }
          .el-radio-button{
            border-radius: 5px;
            width: calc((100% - 110px)/5);
            height: calc((100% - 20px)/2);
            margin: 0 10px 20px;
            //background-color: #EDECEC;
            color: #498CF3;
            .el-radio-button__inner{
              //width: calc((100% - 50px)/5);
              width: 100%;
              height: 100%;
              border-radius: 5px;
              font-size: 18px;
              //background-color: #EDECEC;
            }
          }
        }
        .job-list1{
          border-radius: 5px;
          height: 40px;
          margin: 0 10px 20px;
          border: 1px solid #999999;
          color: #606266;
          display: flex;
          align-items: center;
          padding: 4px 70px;
        }
        .job-list1.active{
          //color: #409EFF;
          //background: #C8DDFC;
          display: flex;
          justify-content: center;
          align-items: center;
          border: none;
          background: #498CF3;
          color: #fff;
        }
        .job-list{
          border-radius: 5px;
          //width: calc((100% - 110px)/5);
          height: 40px;
          margin: 0 10px 20px;
          border:  1px solid #b7b1b1;
          color: #606266;
          display: flex;
          align-items: center;
          padding: 4px 10px 4px 20px ;
          .el-icon-close {
            margin-top: -16px;
            margin-left: 10px;
          }
        }
        .job-list.active{
          //color: #409EFF;
          //background: #C8DDFC;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #b7b1b1;
          background: #498CF3;
          color: #fff;
        }
      }
      .business{
        ::v-deep{
          .el-checkbox-button{
            border-radius: 5px;
            width: calc((100% - 110px)/5);
            height: calc((100% - 20px)/2);
            margin: 0 10px 20px;
            //background-color: #EDECEC;
            color: #498CF3;
            .el-checkbox-button__inner{
              //width: calc((100% - 50px)/5);
              width: 100%;
              height: 100%;
              border-radius: 5px;
              font-size: 18px;
              //background-color: #EDECEC;
            }
          }
        }
        .seek1{
          display: flex;
          justify-content: center;
          align-items: center;
          height: 10%;
          width: 100%;
          color: black;
          //background-color: red;
          .reset1{
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            width: 130px;
            height: 40px;
            line-height: 37px;
            //color: #498CF3;
            border: 1px solid #498CF3;
            border-radius: 20px;
            box-shadow: 0px 4px 0px 0px #e5e5e5;
            margin-right: 15px;
          }
          .search1{
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            width: 130px;
            height: 40px;
            line-height: 37px;
            color: #498CF3;
            border: 1px solid #498CF3;
            border-radius: 20px;
            box-shadow: 0px 4px 0px 0px #e5e5e5;
            margin-left: 15px;
          }
        }
      }
    }
    .rule{
      margin-top: 20px;
      width: 100%;
      height: 2px;
      background-color: #D8D8D8;
    }
    .seek{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 10%;
      width: 100%;
      //background-color: red;
      .reset{
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        width: 130px;
        height: 40px;
        line-height: 37px;
        color: #498CF3;
        border: 1px solid #498CF3;
        border-radius: 20px;
        box-shadow: 0px 4px 0px 0px #e5e5e5;
        margin-right: 15px;
      }
      .search{
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        width: 130px;
        height: 40px;
        line-height: 37px;
        color: #498CF3;
        border: 1px solid #498CF3;
        border-radius: 20px;
        box-shadow: 0px 4px 0px 0px #e5e5e5;
        margin-left: 15px;
      }
    }
    .title-block{
      display: flex;
    }
    .block{
      background-color: #498CF3;
      width: 10px;
      height: 34px;
      border-radius: 15px;
      margin-right: 15px;
    }
    .title{
      padding-top: 7px;
      font-size: 20px;
      //font-weight: 900;
      //padding-bottom: 3px;
    }
  }
  .post-top{
    display: flex;
    flex-wrap: wrap;
    //justify-content: space-between;
    .post{
      padding: 20px 18px;
      background-color: #fff;
      border-radius: 15px;
      margin-top: 15px;
      width: calc((100% - 45px) /3);
      margin-right: 15px;
      height: 235px;
      .post-top{
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .post-title{
          width: 260px;
          font-size: 26px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .post-pay{
          font-size: 26px;
          color: #5493F3;
        }
      }
      .striping{
        margin-top: 20px;
        width: 100%;
        height: 2px;
        background-color: #D8D8D8;
      }
      .site{
        font-size: 20px;
        margin-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .recruiter{
        display: flex;
        align-items: center;
        margin-top: 20px;
        img{
          width: 52px;
          height: 52px;
          border-radius: 30px;
          margin-right: 15px;
        }
      }
    }
    .post:nth-child(3n){
      margin-right: 0;
    }
  }
  .paging{
    width: 800px;
    margin: 30px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    .el-pagination is-background{
      display: flex;
      text-decoration: none;
    }
  }
}
</style>
